// 导入react与React的组件
import   { Component } from 'react';
// 创建一个类型基础react的组件
class ChildCla extends Component {
  // 构造函数有参数props
  constructor(props) {
    // 调用父类(Component)的构造函数
    super(props);
    // console.log("挂载-01 constructor 挂载")
  }
static getDerivedStateFromProps(nextProps, prevState) {
  // console.log("挂载-02 getDerivedStateFromProps props更新")
  console.log("更新-01 getDerivedStateFromProps props更新")
  return prevState;
 }
 shouldComponentUpdate(nextProps, nextState) {
  console.log("更新-02 shouldComponentUpdate 组件是否更新:优化")
  return true;
 }
 getSnapshotBeforeUpdate(prevProps, prevState) {
  console.log("更新-04  getSnapshotBeforeUpdate 组件更新前获取快照")
  // 返回的值是下一个生命周期的第三个参数
  return {name:"mumu",age:18}
 }
 componentDidUpdate(){
  console.log("更新-05  componentDidUpdate 组件已经更新")
 }
 componentWillUnmount() {
  console.log("卸载-01 componentWillUnmount 组件已经卸载" )
 }
  // 状态(响应式数据,vue中data)
  state = { num:5  }
  addNum=(v=1)=>{
    // 只有通过setState更新的状态才会更新视图
    this.setState({num:this.state.num+v})

  }
  // 渲染
  render() { 
    console.log("更新-03 render渲染")
    // console.log("挂载-03 render 渲染")
    // 返回一个节点
    return ( <div>
      <h3>我是类组件</h3>
      <button onClick={()=>this.addNum(1)}>{this.state.num}</button>

    </div> );
  }
  componentDidMount() {
    // console.log("挂载-04 componentDidMount  组件已经挂载完毕")
    // 01发起ajax 操作dom 
  }
  
}
 
export default ChildCla;